<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    #box {
        /* 粘性点位 */
      position: sticky;
      top: 0;
      height: 0;
      color:palevioletred;
      line-height: 150px;
      font-size: 60px;
      /* transition: ; */
      background-color: aqua;
      text-align: center;
      transition: all 2s;
      overflow: hidden;
    }
    p {
      height: 50px;
    }

    #btn3{
        /* 固定定位 */
        position: fixed;
        bottom:100px;
        right: 100px;
        font-size: 50px;
        background-color: pink;
    }
  </style>
  <body>
    <div id="box">顶部导航栏</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <button id="btn3">回到顶部</button>
    <script>
      //   var id = documElementent.documentElement("#box");
      //   var id2 = document.document("btn3");

      //触发点击滚动条
      window.onscroll = function () {
        //卷去的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log("高度", scrollTop);
       //判断条件，当高度大于500时候回到原来的高度 ，否则就为0
        if (scrollTop > 500) {
          box.style.height = "150px";
          btn3.style.display ="block";
        } else {
          box.style.height = "0px";
          btn3.style.display ="none";
        }
      };
      //给btn3一个点击平滑过渡
      btn3.onclick = function () {
        window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
      };
    </script>
  </body>
</html>
